<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片轮播插件</title>
	<style type="text/css">
		body,div,ul,li,img{
			padding: 0;
			margin: 0; 
		}
		.img-scroll-content{
			position: relative;
			margin: 50px auto;
			overflow: hidden;
		}
		.img-scroll-ul{
			position: relative;
			left: 0;
			background-color: #ffcccc;
		}
		.img-scroll-ul li{
			float: left;
			list-style: none;
		}
		.img-scroll-ul img{
			cursor: pointer;
		}
		/*选图小圆点*/
		.img-scroll-tab{
			position: absolute;
			bottom: 30px;
			left: 45%;
		}
		.img-scroll-tab a{
			display: inline-block;
			width: 10px;
			height: 10px;
			margin: 0 4px;
			border-radius: 50%;
			background-color: #666;
			cursor: pointer;
		}
		.img-scroll-tab a:hover{
			background-color: #FFF;
		}
		.img-scroll-tab .current{
			background-color: #FFF;
		}
		/*prev next*/
		.lun-btn{
			display: none;
			position: absolute;
			top: 30%;
			width: 50px;
			height: 140px;
			background-image: url("http://icon.qiantucdn.com/images/newIndex/lun.png"); 
			background-repeat: no-repeat;
			color: rgba(0,0,0,0);
			cursor: pointer;
		}
		.prev-btn{
			background-position: 0 0;
			left: 0;
		}
		.prev-btn:hover{
			background-position: -153px 0;
		}
		.next-btn{
			background-position: -51px 0;
			right: 0;
		}
		.next-btn:hover{
			background-position: -102px 0;
		}

	</style>
</head>
<body onselectstart="return false">
	 
	<div id="img-scroll-content" class="img-scroll-content">
		<img src="http://ubmcmm.baidustatic.com/media/v1/0f0007iyjCsRkBDDFI8jpf.png" alt="第1张轮播图">
		<img src="http://ubmcmm.baidustatic.com/media/v1/0f000aXtGSBKg6_SWBlV80.jpg" alt="第2张轮播图">
		<img src="http://ubmcmm.baidustatic.com/media/v1/0f000PLHky9rqu2h7ncy0s.jpg" alt="第3张轮播图">
		<img src="http://ubmcmm.baidustatic.com/media/v1/0f000Q1WF_t74mgM3jw0p0.jpg" alt="第4张轮播图">
		<img src="http://ubmcmm.baidustatic.com/media/v1/0f0000niW7uPW_Zmd7u1Qf.jpg" alt="第5张轮播图">
	</div> 

	<div id="img-scroll-content-2" class="img-scroll-content">
		<img src="http://ubmcmm.baidustatic.com/media/v1/0f0007iyjCsRkBDDFI8jpf.png" alt="第1张轮播图">
		<img src="http://ubmcmm.baidustatic.com/media/v1/0f000aXtGSBKg6_SWBlV80.jpg" alt="第2张轮播图">
		<img src="http://ubmcmm.baidustatic.com/media/v1/0f000PLHky9rqu2h7ncy0s.jpg" alt="第3张轮播图">
	</div> 

</body>
	<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
	;(function($){
		var scroll_interval = new Object();
		var optionList = new Object();

		function scroll($img_scroll_content,option){
			
			var $img_scroll = $($img_scroll_content.find(".img-scroll-ul")[0]);
			
			var left        = parseInt($img_scroll.css("left"));
			var img_width   = parseInt(option.imgWidth);
			var img_num     = parseInt(option.imgNum);
			var animate_time= parseInt(option.animateTime);
			var current_img = 1;
			
			if(left-img_width > -img_num*img_width){
				
				current_img = $img_scroll.attr("current-img")<img_num? 
							parseInt($img_scroll.attr("current-img"))+1 
							: 1;
				$img_scroll.animate({
					left: left-img_width
				},animate_time);

			}else{
				// var img_scroll_id = $img_scroll.attr("id");
				var $first  = $img_scroll.find("li:first-child");

				var current_img_tmp = $first.attr("id").split("-");
				current_img = current_img_tmp[current_img_tmp.length-1];
				
				var first_id_tmp = $first.attr("id");
				var strHtml = document.getElementById(first_id_tmp).innerHTML;//$first.\html(); 

				$first.remove();
				$img_scroll.append("<li id='img-scroll-"+option.uID+"-"+current_img+"'>"+strHtml+"</li>");
				
				$img_scroll.css({
					left: left+img_width
				}).animate({
					left: left
				},animate_time);

			}

			setCurrentImg($img_scroll,current_img);
			
			/*tmp = setTimeout(function(){
				scroll();
			},8000);*/
		}

		$(document).on({
			"mouseenter": function(){
				var $this = $(this);
				$this.find(".lun-btn").css({"display":"inline-block"});
				if($this.find(".img-scroll-ul").is(":animated")){
					// console.log("正在动画");
					return;
				}else{
					// clear
					var uID = getUlID($this);
					clearInterval(scroll_interval[uID]);
					return;
				}
			},
			"mouseleave": function(){
				var $this = $(this);
				$this.find(".lun-btn").css({"display":"none"});
				if($this.find(".img-scroll-ul").is(":animated")){
					// console.log("正在动画");
					return;
				}else{
					// start
					var uID = getUlID($this);
					scroll_interval[uID] = setInterval(function(){
						scroll($this,optionList[uID]);
					},optionList[uID].intervalTime); 
				}
			}
		},
		".img-scroll-content"
		);

		$(document).on("click",".img-scroll-tab a",function(){
			var $this               = $(this);
			var $img_scroll_content = $this.parents(".img-scroll-content");
			var uID                 = getUlID($img_scroll_content);
			clearInterval(scroll_interval[uID]);

			var index       = $this.index()+1;
			var $img_scroll =  $($img_scroll_content.find(".img-scroll-ul")[0]);
			var img_width   = parseInt($img_scroll.find("img").width());
			
			var imgList = new Array(5);
			$("#"+$img_scroll.attr("id")+" li").each(function(){
				var $th     = $(this);
				var idList  = $th.attr("id").split("-");
				var id      = idList[idList.length-1];
				imgList[id] = $th;
			});

			$img_scroll.empty().wrapInner(imgList);

			$img_scroll.css({
				left: -(index-1)*img_width
			});
			setCurrentImg($img_scroll,index);
			
		});

		$(document).on("click",".lun-btn",function(){
			var $this               = $(this);
			var $img_scroll_content = $this.parents(".img-scroll-content");
			var uID                 = getUlID($img_scroll_content);
			var imgNum              = optionList[uID].imgNum;
			var $img_scroll         = $($img_scroll_content.find(".img-scroll-ul")[0]);
			
			var current_img         = $img_scroll.attr("current-img");
			var option              = $this.text().trim();
			var index               = null;
			
			if(option == 'prev'){
				index = (current_img == 1) ? imgNum : parseInt(current_img)-1;
			}
			else if(option == 'next'){
				index = (current_img == imgNum) ? 1 : parseInt(current_img)+1;
			}
			
			$img_scroll_content.find(".img-scroll-tab a:nth-child("+index+")").trigger("click");
		});

		/**
		 * 设置当前img是第几张
		 * @param {[$]}   $img_scroll [ul容器]
		 * @param {[int]} current_img [当前页数]
		 */
		function setCurrentImg($img_scroll,current_img){
			$img_scroll.attr("current-img",current_img);
			$img_scroll.parents(".img-scroll-content").find(".current").removeClass("current");
			$img_scroll.parents(".img-scroll-content").find(".img-scroll-tab a:eq("+(parseInt(current_img)-1)+")").addClass("current");
		}

		function getUlID($content){
			var uIDList_tmp = $content.find(".img-scroll-ul").attr("id").split("-");
			var uID = uIDList_tmp[uIDList_tmp.length-1];
			return uID;
		}

		function setImgScroll(uID,$content){

			var imgNum = 0;
			var uID = "img-scroll-"+uID;
			
			$content.find("img").each(function(){
				var lID = uID + "-" + (++imgNum);
				$(this).wrap("<li id="+lID+"></li>");
			});

			var content_id_tmp = $content.attr("id");
			var content_Html = document.getElementById(content_id_tmp).innerHTML;

			// 由于系统无法识别$.\html() 函数 使用如上两条语句替代
			var htmlStr = "<ul id="+uID+" class='img-scroll-ul' current-img=1 >"
						+  content_Html
						+ "</ul>"
						+ "<a class='prev-btn lun-btn'>prev</a>"
						+ "<a class='next-btn lun-btn'>next</a>"
						+ "<div class='img-scroll-tab'>"
						+ "<a class='current'></a>";
			for( var i = 1; i < imgNum; i++){
				htmlStr += "<a></a>";
			}
			htmlStr     += "</div>";
			$content.empty().wrapInner(htmlStr);

			return imgNum;
		}
		function setImgScrollCSS($content,op){
			$content.css({
				width: op.imgWidth+"px"
			});
			$content.find(".img-scroll-ul").css({
				width: (op.imgWidth * op.imgNum)+"px",
				height: op.imgHeight+"px"
			});
			$content.find("img").css({
				width: op.imgWidth+"px",
				height: op.imgHeight+"px"
			});
		}
		function checkIDRepeat(uID){
			var isRepeat = false;
			for(var key in optionList){
				if(uID == key){
					isRepeat = true;
					break;
				}
			}
			return isRepeat;
		}
		
		$.fn.initImging = function(opt){
			var optionDefault = {
				uID : new Date().getTime(),
				intervalTime : 5000,
				animateTime : 800,
				imgWidth : 900,
				imgHeight : 504,
				};
			var $this         = $(this);
			var op            = $.extend(optionDefault,opt);
			if(op.intervalTime < op.animateTime){
				var tmp         = op.intervalTime;
				op.intervalTime =  op.animateTime;
				op.animateTime  = tmp;
			}
			op.uID = checkIDRepeat(op.uID)? new Date().getTime(): op.uID;
			op.imgNum         = setImgScroll(op.uID,$this);
			setImgScrollCSS($this,op);

			optionList[op.uID] = op;

			scroll_interval[op.uID]  = setInterval(function(){
				scroll($this,op);
		    },op.intervalTime);
			
		}
	})(jQuery)

</script>
<script type="text/javascript">
	$("#img-scroll-content").initImging({
		uID: 1,
		imgWidth : 1220,
		imgHeight : 358,
	});

	$("#img-scroll-content-2").initImging({
		uID: 1,
		imgWidth : 400,
		imgHeight : 100,
	});
</script>
</html>
